<!-- 详情 -->
<template>
  <div class="drawer-layoutx">
    <el-drawer title="选配商品" :visible.sync="drawer" @close="closedinvitation" size="90%"
      :wrapperClosable="false">
      <div class="layout">
        <!-- <div class="configform-box">
          <el-form label-position="left" :inline="true" size="small" ref="eventsForm" :model="eventsForm">
            <el-form-item label="关键字" class="form-box-item" label-width="50px" prop="activity_name">
              <el-input placeholder="请输入关键字" v-model="eventsForm.keywords">
              </el-input>
            </el-form-item>
            <el-form-item label="分类" class="form-box-item" label-width="50px" prop="cate_id">
              <el-cascader v-model="eventsForm.cate_id" :options="categoryList" :props="{
                  checkStrictly: true,
                  value: 'id',
                  label: 'name',
                  children: 'children',
                }" clearable />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" style="height: 30px">查询</el-button>
              <el-button style="height: 30px" @click="resetForm()">重置</el-button>
            </el-form-item>
          </el-form>
        </div> -->
        <div style="margin:20px 18px;">
          <el-row :gutter="20">
            <el-col :span="21">
              <div class="left-panel">
                <el-button icon="el-icon-circle-plus-outline" type="primary" size="small"
                  @click="addproduct()">添加商品</el-button>
                  <el-button icon="el-icon-setting" type="primary" size="small"
                    @click="batch_configuration()">批量配置</el-button>
              </div>
            </el-col>
            <el-col :span="3" style="text-align:right;">
              <el-button type="warning" size="small"
                @click="submitForms()">保存当前配置</el-button>
            </el-col>
          </el-row>
        </div>
          <div style="margin-left:10px;">
            <el-form ref="allocationform" :model="formData" :rules="formRules" inline>
              <el-col>
                <el-table ref="multipleTable" v-loading="loading" :data="formData.tableData" :header-cell-style="{
                  'background-color': '#e5eeff',
                  color: '#515a6e',
                  height:'50px',
                }" @selection-change="handleSelectionChange" style="width: 100%;">
                  <el-table-column type="selection" width="55">
                  </el-table-column>
                  <el-table-column prop="name" label="商品名称" align="center" width="150">
                    <template slot-scope="scope">
                      <el-tooltip placement="top-start" :content="scope.row.name + ''">
                        <div class="one_line_hidden">
                          {{ scope.row.name ? scope.row.name : "-" }}
                        </div>
                      </el-tooltip>
                    </template>
                  </el-table-column>
                  <el-table-column prop="category1" label="商品分类" align="center" width="90">
                    <template slot-scope="scope">
                      {{scope.row.category1 ? scope.row.category1.name : '-'}}
                      </template>
                  </el-table-column>
                  <el-table-column prop="main_image" label="商品图片" align="center" width="90">
                    <template slot-scope="scope">
                      <div style="width: 36px; height: 36px; margin: 0 auto">
                        <el-image v-if="scope.row.main_image" :src="scope.row.main_image"
                          :preview-src-list="[scope.row.main_image]" />
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="supplier" label="所属店铺" align="center" width="90">
                    <template slot-scope="scope">
                      <el-tooltip placement="top-start" :content="scope.row.supplier.supplier_name + ''">
                        <div class="one_line_hidden">
                          {{ scope.row.supplier ? scope.row.supplier.supplier_name : "-" }}
                        </div>
                      </el-tooltip>
                    </template>
                  </el-table-column>
                  <el-table-column prop="max_price" label="商品价格" align="center" width="90">
                  </el-table-column>
                  <el-table-column label="奖励规则" align="center" width="170">
                    <template slot-scope="scope">
                      <el-col style="margin-top:10px">
                        <el-form-item :prop="`tableData.${scope.$index}.award_type`" :rules="formRules.nonempty">
                          <el-select v-model="scope.row.award_type" placeholder="请选择">
                            <el-option v-for="item in reward_rules" :key="item.value" :label="item.label"
                              :value="item.value">
                            </el-option>
                          </el-select>
                        </el-form-item>
                      </el-col>
                    </template>
                  </el-table-column>
                  <el-table-column label="送积分数" align="center" width="150">
                    <template slot-scope="scope">
                      <el-col style="margin-top:10px">
                        <el-form-item :prop="`tableData.${scope.$index}.integral_num`" :rules="formRules.moneynumber">
                          <el-input controls-position="right" v-model="scope.row.integral_num" placeholder="数值/比例">
                          </el-input>
                        </el-form-item>
                      </el-col>
                    </template>
                  </el-table-column>
                  <el-table-column label="送提货券数" align="center" width="150">
                    <template slot-scope="scope">
                      <el-col style="margin-top:10px">
                        <el-form-item :prop="`tableData.${scope.$index}.voucher_num`" :rules="formRules.moneynumber">
                          <el-input controls-position="right" v-model="scope.row.voucher_num" placeholder="数值/比例">
                          </el-input>
                        </el-form-item>
                      </el-col>
                    </template>
                  </el-table-column>
                  <el-table-column label="送积分转化卡" align="center" width="150">
                    <template slot-scope="scope">
                      <el-col style="margin-top:10px">
                        <el-form-item :prop="`tableData.${scope.$index}.conversion_card_num`" :rules="formRules.moneynumber">
                          <el-input controls-position="right" v-model="scope.row.conversion_card_num" placeholder="数值/比例">
                          </el-input>
                        </el-form-item>
                      </el-col>
                    </template>
                  </el-table-column>
                  <el-table-column label="送现金数" align="center" width="150">
                    <template slot-scope="scope">
                      <el-col style="margin-top:10px">
                        <el-form-item :prop="`tableData.${scope.$index}.balance_num`" :rules="formRules.moneynumber">
                          <el-input controls-position="right" v-model="scope.row.balance_num" placeholder="数值/比例">
                          </el-input>
                        </el-form-item>
                      </el-col>
                    </template>
                  </el-table-column>
                  <el-table-column label="转化卡有效期(天)" align="center" width="150">
                    <template slot-scope="scope">
                      <el-col style="margin-top:10px">
                        <el-form-item :prop="`tableData.${scope.$index}.conversion_card_expire_day`" :rules="formRules.newFieldName">
                          <el-input controls-position="right" v-model="scope.row.conversion_card_expire_day" placeholder="请输入整数">
                          </el-input>
                        </el-form-item>
                      </el-col>
                    </template>
                  </el-table-column>
                  <el-table-column label="发放时间" align="center" width="150">
                    <template slot-scope="scope">
                      <el-col style="margin-top:10px">
                        <el-form-item :prop="`tableData.${scope.$index}.node_day`"
                          :rules="formRules.timeFieldName">
                          <el-input controls-position="right" v-model="scope.row.node_day" placeholder="整数">
                            <template slot="prepend">T+</template>
                          </el-input>
                        </el-form-item>
                      </el-col>
                    </template>
                  </el-table-column>
                  <el-table-column label="时间节点" align="center" width="150">
                    <template slot-scope="scope">
                      <el-col style="margin-top:10px">
                        <el-form-item :prop="`tableData.${scope.$index}.node_type`" :rules="formRules.nonemptys">
                          <el-select v-model="scope.row.node_type" placeholder="请选择">
                            <el-option v-for="item in mouchoptions" :key="item.value" :label="item.label"
                              :value="item.value">
                            </el-option>
                          </el-select>
                        </el-form-item>
                      </el-col>
                    </template>
                  </el-table-column>
                  <el-table-column fixed="right" prop="address" label="操作" align="center" width="100px">
                    <template slot-scope="scope">
                      <el-button type="danger" size="mini" @click="goodsremove(scope.row.id)">
                        移除
                      </el-button>
                    </template>
                  </el-table-column>
                </el-table></el-col>
            </el-form>
        </div>
      </div>
    </el-drawer>
    <batch ref="refbatch" />
    <addproduct ref="addproduct" v-if="ifShowadd" :goodsIds="goodsIds"
    :addproductTitle="addproductTitle" />
  </div>
</template>
<script>
  import batch from "./batch";
  import {
    getCategoryList,
  } from "@/api/commodity/index";
  import {pluginssave} from "@/api/plugins"
  import addproduct from "./addproduct";
  export default {
    name: "detail",
    props: [],
    components: {
      addproduct,
      batch
    },
    data() {
      return {
        goodsIds:[],
        drawer: true,
        formData: {
          tableData: []
        },
        eventsForm:{
          keywords:''
        },
        categoryList: [],
        loading: false,
        multipleSelection: [],
        addproductTitle: "",
        ifShowadd: false,
        formRules: {
          moneynumber: [{
            required: false,
            validator: (rule, value, callback) => {
              let req = /^\d+(\.\d{1,2})?%?$/;
              let regex = /%/;
              if(regex.test(value)){
                let jsx = /^\d+(\.\d{1,2})?%?$/;
                if(jsx.test(value)){
                  callback();
                }else{
                  callback(new Error("最多两位正小数"));
                }
              }else{
                if (req.test(value)) {
                  if (Number(value) > 999999) {
                    return callback(new Error("数值不能大于999999"));
                  }
                  callback();
                } else {
                  callback(new Error("最多两位正小数"));
                }
              }
            },
            trigger: "change",
          }],
          nonempty: [{
            required: true,
            message: '请选择时间节点',
            trigger: 'change'
          }],
          nonemptys: [{
            required: true,
            message: '请选择奖励规则',
            trigger: 'change'
          }],
          timeFieldName: [{
            required: false,
            validator: (rule, value, callback) => {
              let req = /^(100|[1-9]?\d)$/;
              if (req.test(value)) {
                callback();
              } else {
                callback(new Error("请输入0-100正整数"));
              }
            },
            trigger: "change",
          }],
          newFieldName: [{
            required: false,
            validator: (rule, value, callback) => {
              let req = /^\d+$/;
              if (req.test(value)) {
                callback();
              } else {
                callback(new Error("请输入正整数"));
              }
            },
            trigger: "change",
          }],
        },
        reward_rules:[
          {
            value: 1,
            label: '按支付金额'
          },
          {
            value: 2,
            label: '按商品利润金额'
          }
        ],
       mouchoptions: [{
         value: 1,
         label: '支付成功'
       }, {
         value: 2,
         label: '确认收货'
       }, {
         value: 3,
         label: '评价后'
       },
       {
         value: 4,
         label: '过售后期'
       }],
      };
    },
    created() {},
    mounted() {
      // this.getConfigurationWay();
    },
    methods: {
      //取消勾选
      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      //保存当前配置
      submitForms() {
        if (!this.formData.tableData.length) {
          return this.$messages.warning('请添加商品')
        }
        this.$refs.allocationform.validate((valid) => {
          if (valid) {
            let arr = [];
            this.formData.tableData.forEach((item) => {
              arr.push({
                goods_id: item.id,
                node_type: item.node_type,
                integral_num: item.integral_num,
                voucher_num: item.voucher_num,
                conversion_card_expire_day: item.conversion_card_expire_day,
                conversion_card_num: item.conversion_card_num,
                balance_num: item.balance_num,
                node_day: item.node_day,
                award_type: item.award_type,
              });
            });
            let param = {
              goods:arr
            }
            pluginssave(param).then((res) => {
              if (res.code !== 200 || res.status !== 1) {
                return this.$messages.error(res.msg);
              }
              this.$messages.success(res.msg);
              this.closedinvitation()
            });
          } else {
            this.$messages.error('您有部分配置未完成');
            return false;
          }
        })
      },
      //批量配置
      batch_configuration(){
        if (!this.multipleSelection.length) {
          return this.$messages.warning('请至少选择一个商品')
        }
        this.$refs.refbatch.open()
      },
      getConfigurationWay() {
        getCategoryList().then((res) => {
          if (res.code !== 200 || res.status !== 1) {
            return this.$messages.error(res.msg);
          }
          this.categoryList = res.data;
        });
      },
      // 关闭抽屉
      closedinvitation() {
        this.$parent.closeConfig();
      },
      //重置
      resetForm() {
        this.eventsForm.keywords = ''
      },
      closeaddproduct() {
        this.ifShowadd = false;
      },
      //点击删除
      goodsremove(idToRemove) {
        const filteredArray = this.formData.tableData.filter(obj => obj.id !== idToRemove);
        this.formData.tableData = filteredArray
        this.goodsIds = this.goodsIds.filter(obj => obj !== idToRemove);
      },
      //回调批量设置
      bathsetting(settform){
        let val = []
        this.multipleSelection.forEach((item)=>{
          this.$set(item, 'node_type', settform.node_type)
          this.$set(item, 'integral_num', settform.integral_num)
          this.$set(item, 'voucher_num', settform.voucher_num)
          this.$set(item, 'conversion_card_expire_day', settform.conversion_card_expire_day)
          this.$set(item, 'conversion_card_num', settform.conversion_card_num)
          this.$set(item, 'balance_num', settform.balance_num)
          this.$set(item, 'node_day', settform.node_day)
          this.$set(item, 'award_type', settform.award_type)
        })
      },
      //回调商品
      addproductWay(row) {
        row.forEach((item) => {
          this.formData.tableData.push(item);
        })
        this.total = this.formData.tableData.length;
        row.forEach((item) => {
          this.goodsIds.push(item.id);
        });
        this.$message({
          message: "添加成功",
          type: "success",
        });
        this.$refs.addproduct.getListWay(this.goodsIds);
      },
      //添加商品
      addproduct() {
        this.ifShowadd = true;
        this.addproductTitle = "添加商品";
        this.$nextTick(() => {
          this.$refs.addproduct.getListWay(this.goodsIds);
        });
      },
      //多选批量配置
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
    },
  };
</script>
<style lang="scss">
  .drawer-layoutx {

    /*1.显示滚动条：当内容超出容器的时候，可以拖动：*/
    .el-drawer__body {
      overflow: auto;
    }

    .el-drawer__header {
      background-color: #0256ff;
      color: #ffffff;
      padding: 10px 20px;
      margin-bottom: 10px;
    }

    .el-tabs__header {
      padding-left: 50px;
      margin: 0;
    }

    .el-tabs__item {
      padding: 0 40px;
    }

    .el-tabs__nav-wrap::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 2px;
      background-color: #ffffff;
      z-index: 1;
    }

    .el-alert--warning.is-light .el-alert__description {
      color: #c77b04;
      font-size: 14px;
    }

    .configform-box {
      .form-box-item {
        .el-form-item__label {
          font-size: 12px;
          font-weight: 500;
          width: 80px;
        }

        .el-input {
          width: 200px;
        }
      }
    }
  }
</style>
<style lang="scss" scoped>
  .blockquote-box {
    border-left: 4px solid #409eff;
    padding-left: 16px;
    margin: 16px 0;
    height: 40px;
    line-height: 40px;
    background: #fafafa;
    font-size: 16px;
  }

  .configform-box {
    margin: 0 20px;

    .form-box-item {
      padding-bottom: 10px;
      padding-right: 20px;
      font-size: 12px;
      color: #4c4c4c;

      .form-tip {
        font-size: 12px;
        color: #4c4c4c;

        .tip-key {
          font-weight: bold;
          text-decoration: underline;
        }
      }
    }

    .table-top {
      display: flex;
      justify-content: space-between;
      margin-bottom: 20px;

      .table-top-left {
        display: flex;

        div {
          margin-right: 20px;
        }
      }

      .table-top-right {
        display: flex;

        div {
          margin-left: 20px;
        }
      }
    }

    .table-num {
      margin-left: 5px;
      background: #f0f0f0;
      width: 35px;
      border-radius: 5px;
    }
  }

  .button-box {
    margin-left: 30px;
    margin-bottom: 20px;

    .next-button {
      background-color: #eeeeee;
      color: #4c4c4c;
      height: 30px;
    }
  }

  .edit-cell {
    width: 80px;
    border: none;
    background: none;
  }
</style>
